<script setup>
import ip from '@/utils/baseURL.js';
import { ref, onMounted } from 'vue'
import { User, Message, Location } from '@element-plus/icons-vue'
import axios from 'axios'

// 老师数据
const teachers = ref([])

// 获取老师信息
const getTeacherInfo = async () => {
    try {
        const response = await axios.get(ip + '/inter/teacherInfo/getInfo')
        if (response.data.code === 200) {
            // 处理返回的数据
            teachers.value = response.data.data.records.map(teacher => ({
                id: teacher.teacherId,
                name: teacher.teacherName,
                title: teacher.title,
                avatar: teacher.picture,
                email: teacher.email,
                office: teacher.office,
                research: teacher.research.split('-'),
                tags: teacher.research.split('-')
            }))
        }
    } catch (error) {
        console.error('获取老师信息失败:', error)
        // 使用默认数据作为后备
        teachers.value = [
            {
                id: 1,
                name: '刘涛教授',
                title: '教授、博士生导师',
                avatar: '@/assets/avatar/1.jpg',
                tags: ['深度学习', '浅度学习'],
                email: 'zhang@example.com',
                office: '教学楼三楼',
                research: ['深度学习', '浅度学习']
            },
            {
                id: 2,
                name: '翟强教授',
                title: '教授、博士生导师',
                avatar: '@/assets/avatar/2.jpg',
                tags: ['智慧农业', '深度学习'],
                email: 'zhai@outlook.com',
                office: '行政楼四楼',
                research: ['智慧农业', '深度学习']
            }
        ]
    }
}

// 页面加载时获取数据
onMounted(() => {
    getTeacherInfo()
})
</script>

<template>
    <div class="teacher-container">
        <div class="main-content">
            <!-- 页面标题 -->
            <div class="page-header">
                <h1>指导老师</h1>
            </div>

            <!-- 老师列表 -->
            <div class="teacher-list">
                <el-row :gutter="30">
                    <el-col :xs="24" :sm="12" v-for="teacher in teachers" :key="teacher.id">
                        <el-card class="teacher-card" :body-style="{ padding: '0px' }">
                            <div class="teacher-image">
                                <!-- 使用 el-avatar 组件 -->
                                <el-avatar 
                                    :size="100" 
                                    :src="teacher.avatar" 
                                    class="teacher-avatar"
                                >
                                    <template #default>
                                        <div class="teacher-default-avatar">
                                            {{ teacher.name.slice(0, 2) }}
                                        </div>
                                    </template>
                                </el-avatar>
                            </div>
                            <div class="teacher-info">
                                <h2 class="teacher-name">{{ teacher.name }}</h2>
                                <div class="teacher-title">{{ teacher.title }}</div>
                                <div class="teacher-tags">
                                    <el-tag v-for="tag in teacher.tags" :key="tag" size="small" class="tag-item">
                                        {{ tag }}
                                    </el-tag>
                                </div>
                                <div class="teacher-contact">
                                    <div class="contact-item" v-if="teacher.email">
                                        <el-icon><Message /></el-icon>
                                        <span>{{ teacher.email }}</span>
                                    </div>
                                    <div class="contact-item" v-if="teacher.office">
                                        <el-icon><Location /></el-icon>
                                        <span>{{ teacher.office }}</span>
                                    </div>
                                </div>
                                <div class="teacher-research">
                                    <h3>研究方向</h3>
                                    <ul>
                                        <li v-for="(direction, index) in teacher.research" :key="index">
                                            {{ direction }}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>



<style lang="scss" scoped>
.teacher-container {
    width: 100%;
    overflow-x: auto;

    .main-content {
        width: 85%;
        margin: 0 auto;
        padding: 40px 20px;
        box-sizing: border-box;
    }

    .page-header {
        margin-bottom: 40px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;

        h1 {
            font-size: 36px;
            color: #333;
            margin: 0;
            position: relative;
            display: inline-block;
            padding-bottom: 15px;
            white-space: nowrap;

            &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 60px;
                height: 4px;
                background-color: #86B943;
            }
        }
    }

    .teacher-list {
        .el-row {
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            margin: 0 !important;
        }

        .el-col {
            flex: 0 0 auto;
            width: calc(50% - 30px);
            margin: 0 15px;
            
            &.el-col-24, &.el-col-sm-12 {
                width: calc(50% - 30px) !important;
            }
        }

        .teacher-card {
            width: 100%;
            margin-bottom: 0;
            transition: all 0.3s ease;
            overflow: hidden;
            height: 520px;

            &:hover {
                transform: translateY(-5px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }

            .teacher-image {
                display: flex;
                justify-content: center;
                margin: 15px 0;

                .teacher-avatar {
                    transition: transform 0.3s ease;

                    &:hover {
                        transform: scale(1.05);
                    }
                }

                .teacher-default-avatar {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 100px;
                    height: 100px;
                    background: #f5f7fa;
                    color: #909399;
                    font-size: 30px;
                    border-radius: 50%;
                }
            }

            .teacher-info {
                padding: 15px;
                height: 300px;
                overflow-y: auto;

                .teacher-name {
                    font-size: 22px;
                    color: #333;
                    margin: 0 0 8px 0;
                    font-weight: bold;
                }

                .teacher-title {
                    font-size: 16px;
                    color: #666;
                    margin-bottom: 10px;
                }

                .teacher-tags {
                    margin-bottom: 10px;
                    display: flex;
                    flex-wrap: wrap;
                    gap: 6px;

                    .tag-item {
                        background-color: #f0f9eb;
                        border-color: #e1f3d8;
                        color: #67c23a;
                        font-size: 14px;
                    }
                }

                .teacher-contact {
                    margin-bottom: 10px;

                    .contact-item {
                        display: flex;
                        align-items: center;
                        gap: 6px;
                        color: #666;
                        font-size: 14px;
                        margin-bottom: 6px;

                        .el-icon {
                            color: #86B943;
                        }
                    }
                }

                .teacher-research {
                    h3 {
                        font-size: 16px;
                        color: #333;
                        margin: 0 0 8px 0;
                        font-weight: bold;
                    }

                    ul {
                        list-style: none;
                        padding: 0;
                        margin: 0;

                        li {
                            color: #666;
                            font-size: 14px;
                            line-height: 1.5;
                            padding-left: 16px;
                            position: relative;
                            margin-bottom: 4px;

                            &::before {
                                content: '•';
                                color: #86B943;
                                position: absolute;
                                left: 0;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>